<template>
  <InlineLayout title-name="缴费数据列表">
    <template #header>
      <my-form ref="ruleForm" v-model:modelValue="dataForm" :model="dataForm" :items-datas="itemsDatas">
        <my-button type="reset" title="重置" @click="reset" />
        <my-button type="search" title="查询" :loading="loading" @click="search" />
      </my-form>
    </template>

    <template #titleTools>
      <my-button type="export" title="台账导出" @click="openClick" />
    </template>

    <my-table :columns="columns" :table-data="tableData">
      <template #operation="scope">
        <my-button type="text">附件</my-button>
        <my-button type="text">详情</my-button>
        <my-button type="text">修改</my-button>
        <my-button type="text">提交</my-button>
        <my-button type="text">删除</my-button>
        <my-button type="text">审核记录</my-button>
      </template>
    </my-table>
    <template #footer>
      <pagination v-model:page="dataForm.pageNum" v-model:limit="dataForm.pageSize" :total="total" @pagination="getList" />
    </template>
  </InlineLayout>
  <addOrEdit v-model="visible" :dialog-title="title" :current-row="currentRow" />
</template>
<script setup>
import { ref, onMounted } from 'vue';
import addOrEdit from './components/addOrEdit.vue';
const total = 0;
const recordShow = ref(false);
const state = reactive({
  visible: false,
  title: '',
  dataForm: {
    pageNum: 1,
    pageSize: 10
  },
  currentRow: {},
  itemsDatas: [
    { label: '姓名', prop: 'medType', type: 'input' },
    { label: '证件号码', prop: 'medType', type: 'input' }
  ],

  tableData: [{}],
  columns: [
    { label: '序号', type: 'index', width: '55', prop: 'index' },
    { label: '个人编号', prop: 'rchkFlag', align: 'center' },
    { label: '身份证号码', prop: 'rchkFlag', align: 'center' },
    { label: '姓名', prop: 'rchkFlag', align: 'center' },
    { label: '个人账号', prop: 'rchkFlag', align: 'center' },
    { label: '出生年月', prop: 'rchkFlag', align: 'center' },
    { label: '本期个人缴费', prop: 'rchkFlag', align: 'center' },
    { label: '本期单位划转', prop: 'rchkFlag', align: 'center' },
    { label: '本期单位代缴', prop: 'rchkFlag', align: 'center' },
    { label: '历年个人缴费', prop: 'rchkFlag', align: 'center' },
    { label: '历年单位划转', prop: 'rchkFlag', align: 'center' },
    { label: '历年单位代缴', prop: 'rchkFlag', align: 'center' },
    { label: '数据状态', prop: 'rchkFlag', align: 'center' },
    { label: '操作', type: 'operation', minWidth: '180px' }
  ]
});
const { itemsDatas, tableData, columns, dataForm, isShow, currentRow, visible, title } = toRefs(state);
//新增
const addClick = () => {
  title.value = '新增';
  visible.value = true;
};
//列表初始化
const getList = () => {};
const openClick = () => {};
//重置
const reset = () => {};
//查询
const search = () => {
  getList();
};
onMounted(() => {
  getList();
});
</script>
